﻿<!-- WorkflowEngineSampleCode -->
<style>
.workflow-toolbar > button{
    margin-right: 8px;
}
</style>

<div bsModal #editDocumentModal="bs-modal" class="modal fade" (onShown)="onShown()" tabindex="-1" role="dialog" aria-labelledby="editDocumentModal" aria-hidden="true" [config]="{backdrop: 'static'}">
    <div class="modal-dialog">

        <div #modalContent class="modal-content">
            <form *ngIf="active" #editDocumentForm="ngForm" id="frm_edit_document" novalidate (ngSubmit)="save()">
                <div class="modal-header">
                    <button type="button" class="close" (click)="close()" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">
                        <span>{{ "EditDocument" | localize }}</span>
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="workflow-toolbar">
                        <ng-template ngFor let-row [ngForOf]="commands" let-roleIndex="index">
                            <button [disabled]="!editDocumentForm.form.valid" class="btn waves-effect" type="button"  (click)="executeCommand(row)">
                                {{ row.name | localize }}
                            </button>                      
                        </ng-template>
                    </div>

                    <ul class="nav nav-tabs tab-nav-right" role="tablist">
                        <li role="presentation" class="active"><a href="#edit-document-details" data-toggle="tab">Document Details</a></li>
                        <li role="presentation"><a href="#edit-workflow-history" data-toggle="tab">Workflow History</a></li>
                    </ul>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane animated fadeIn active" id="edit-document-details">
                            <div class="row clearfix" style="margin-top:10px;">
                                <div class="col-sm-12">
                                    <div class="form-group form-float">
                                        <div class="form-line">
                                            <input id="title" type="text" name="Title" [(ngModel)]="document.title" required maxlength="32" minlength="2" class="validate form-control">
                                            <label for="title" class="form-label">{{ "Title" | localize }}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
    
                            <div class="row clearfix" style="margin-top:10px;">
                                <div class="col-sm-12">
                                    <div class="form-group form-float">
                                        <div class="form-line">
                                            <input id="state" type="text" name="State" [(ngModel)]="document.state" readonly class="form-control">
                                            <label for="state" class="form-label">{{ "State" | localize }}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
    
                            <div class="row clearfix" style="margin-top:10px;">
                                <div class="col-sm-12">
                                    <div class="form-group form-float">
                                        <div class="form-line">
                                            <textarea id="description" type="text" name="Description" [(ngModel)]="document.description" rows="6"  class="validate form-control"></textarea>
                                            <label for="description" class="form-label">{{ "Description" | localize }}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div role="tabpanel" class="tab-pane animated fadeIn" id="edit-workflow-history">
                            <div class="row">
                                <div class="col-sm-12 ">
                                    <table class="table table-hover table-striped">
                                        <thead>
                                            <tr>
                                                <th>{{ 'User' | localize }}</th>     
                                                <th>{{ 'Command' | localize }}</th>  
                                                <th>{{ 'Time' | localize }}</th>                          
                                                <th>{{ 'From' | localize }}</th>
                                                <th>{{ 'To' | localize }}</th>                                                
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <ng-template ngFor let-row [ngForOf]="history" let-roleIndex="index">
                                                <tr>
                                                    <td>{{row.executorIdentityName}}</td>
                                                    <td>{{row.triggerName}}</td>
                                                    <td>{{row.transitionTime}}</td>
                                                    <td>{{row.from}}</td>
                                                    <td>{{row.to}}</td>                                                
                                                </tr>                                            
                                            </ng-template>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="modal-footer">
                    <button [disabled]="saving" type="button" class="btn btn-default waves-effect" (click)="close()">
                        {{ "Cancel" | localize }}
                    </button>
                    <button [disabled]="!editDocumentForm.form.valid" type="submit" class="btn btn-primary waves-effect">
                        {{ "Save" | localize }}
                    </button>
                </div>

            </form>
        </div>
    </div>
</div>
